<!DOCTYPE html>
<html>
<head>
    <title>remove</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="assets/examples.css">
    <script src="assets/jquery.min.js"></script>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="assets/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
    <script src="assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
    <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>

</head>
<body>
<div class="container">
    <div id="toolbar">
        <button id="button" class="btn btn-default">remove</button>
    </div>
    <table id="table"
           data-show-export="true"
    >
    </table>
</div>
<script>
    var $table = $('#table'),
        $button = $('#button');

     $table.bootstrapTable({
            url: '/json/data2.json',//后台调用的链接
            //height: getHeight(),//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            width: 10,
            method: 'get',           //请求方式（*）
            striped: true,           //是否显示行间隔色
            cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        
            pagination: true,          //是否显示分页（*）
            sortable: true,           //是否启用排序
            sortName: 'createdAt',       //排序名称 默认没有

            showColumns:true,           //开启显示列选择
            minimumCountColumns:'2',     //最少要显示几列

            sortOrder: "asc",          //默认排序方式
            toolbar: '#button',        //工具按钮用哪个容器 把按钮添加到表格中
            sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,            //初始化加载第一页，默认第一页
            pageSize: 3,            //初始每页的记录行数（*）
            pageList: [10, 25, 50, 100],    //可供选择的每页的行数（*）
        
            clickToSelect: false,        //是否启用点击选中行 默认不启用
            uniqueId: "id",           //每一行的唯一标识，一般为主键列
            search: true,               //打开搜索框
            showPaginationSwitch:true, //分组件显示隐藏 默认为true
            //paginationDetailHAlign:'',
            paginationPreText:'上一页',
            paginationNextText:'下一页',
            //formatShowingRows:'Showing %s to %s of %s rows',

            columns: [
                [
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center',
                        valign: 'middle'
                    }, {
                        title: 'ID',
                        field: 'id',

                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    },  {
                        field: 'name',//列名
                        title: 'Item Name',//显示的列名
                        sortable: true,//是否排序
                        align: 'left',//文字位置center中间 left 靠左 right 默认靠左
                        valign: 'center'
                    }, {
                        field: 'price',
                        title: 'Item Price',
                        sortable: true,
                        align: 'center',
                    },
                    {
                        field: 'state',
                        title: '自定义',
                        sortable: false,
                        align: 'center',
                        formatter: operateFormatter//数据格式解析方法自定义
                    }
                ]
            ]
        });

        function getHeight() {
        return $(window).height() - $('h1').outerHeight(true);
        }

        //自定义方法
        function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="glyphicon glyphicon-heart"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
        }
        //删除行
 /* window.operateEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row));
        },
        'click .remove': function (e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            });
        }
    };
    */


    //删除
    $(function () {
        $button.click(function () {
            var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id;
            });
            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids
            });
        });
    });
    //

</script>
</body>
</html>